<template>
  <view class="data">
    <div class="bg">
      <div class="card">
        <div class="img">
          <View className="img2">
              <View
                className="headImg"
                id="headImg"
                :style="{ backgroundImage: 'url(' + selectedImg + ')' }"
              ></View>
          </View>
          <button
              className="imgBtn"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
          >
          点击更换头像
          </button>
        </div>
      </div>
      <div class="right">
        <div class="name">昵称</div>
        <div class="nameVal">
           <input
              type="nickname"
              v-model="name"
              placeholder="请输入昵称"
              @onChange="getNickName"
            />
        </div>
      </div>
      <div class="bottom">
        <button class="btn" @click="save">确定</button>
      </div>
    </div>
  </view>
</template>

<script>
// vue
import { reactive, toRefs, onMounted, ref } from "vue";
// taro
import Taro from "@tarojs/taro";
import { useState, useDidShow } from "@tarojs/taro";
// 用户头像
import wxImg from "../../images/wx.jpg"; // 

export default {
  name: "ReInfo",
  components: {},
  setup() {

    // 修改昵称
  const name = ref("");
  const getNickName = (val) => {
    name.value = val.detail.value;
  };

  // 修改头像
  const selectedImg = ref(
    Taro.getStorageSync("img") || wxImg
  );
  const onChooseAvatar = (e) => {
    const img = e.detail.avatarUrl + '';
    selectedImg.value = img
    Taro.setStorageSync("img", img);
  };

    // 保存昵称
    const save = () => {
      Taro.setStorageSync("nickName", name.value);
      Taro.showToast({
        title: "修改成功",
        icon: "success",
        duration: 2000,
      });
      setTimeout(() => {
        Taro.navigateBack();
      }, 800);
    };
    return {
      name,
      selectedImg,
      save,
      onChooseAvatar
    };
  },
};
</script>

<style lang="scss">
.data {
  background-color: #eee;
  width: 100vw;
  min-height: 100vh;

  .bg {
    width: 100vw;
    height: 30vh;
    .card {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 30vh;

      .img {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .headImg {
          background-image: url("https://www.2008php.com/2020_Website_appreciate/2020-08-25/20200825210203.jpg");
          border: 1px solid #ddd;
          width: 19vw;
          height: 19vw;
          border-radius: 50%;
          background-size: cover;
          /* 图片完全覆盖div区域 */
          background-position: center;
          /* 图片居中显示 */
        }
      }
      .imgBtn {
         margin-top: 2vh;
      }
      button {
        width: 30vw;
        font-size: 3.5vw;
        // margin-top: 2vh;
        margin-bottom: 1vh;
      }
    }

    .right {
      background-color: #fff;
      // height: 10vh;
      width: 94vw;
      display: flex;
      align-items: center;
      text-align: left;
      padding: 1vh 3vw;
      .nameVal {
        flex: 1;
        text-align: right;
      }
      .name {
        width: 30vw;
        // margin-left: 5vw;
        font-size: 5vw;
        color: #666;
      }
    }

    .bottom {
      position: absolute;
      bottom: 4vh;
      left: 6vw;
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 88vw;
        height: 12vw;
        background-color: #00a565;
        border-radius: 8vw;
        color: #fff;
        font-size: 6vw;
      }
    }
  }
}
</style>
